<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Cascader 级联选择器 | vform-element</title>
    <meta name="description" content="基于 Vue3 和 Element-plus 的动态表单组件">
    <link rel="stylesheet" href="/vform-element/assets/style.d788119a.css">
    <link rel="modulepreload" href="/vform-element/assets/chunks/framework.63bebe7e.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/_commonjsHelpers.ba691886.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/chat-round.0845d834.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/config-provider2.da89bd12.js">
    <link rel="modulepreload" href="/vform-element/assets/chunks/builder.040a1dc4.js">
    <link rel="modulepreload" href="/vform-element/assets/api_cascader.md.19457b39.lean.js">
    <link rel="modulepreload" href="/vform-element/assets/app.361feb9c.js">
    
    <meta name="twitter:title" content="Cascader 级联选择器 | vform-element">
  <meta property="og:title" content="Cascader 级联选择器 | vform-element">
  </head>
  <body>
    <div id="app"><!--[--><!--[--><div class="theme"><header class="nav-bar" data-v-29dab36d><div class="nav-bar-wrapper" data-v-29dab36d><div class="sidebar-button" data-v-29dab36d><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vform-element/" aria-label="vform-element, back to home" data-v-29dab36d data-v-fcdf2a90><!----> vform-element</a><div class="flex-grow" data-v-29dab36d></div><div class="nav" data-v-29dab36d><nav class="nav-links" data-v-29dab36d data-v-68d46b9e><!--[--><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/" data-v-7e0eb2fd>首页 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/guide/get-start.html" data-v-7e0eb2fd>指南 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item active" href="/vform-element/api/form.html" data-v-7e0eb2fd>配置 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item isExternal" href="https://github.com/foolishchow/vform" target="_blank" rel="noopener noreferrer" data-v-7e0eb2fd>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7e0eb2fd><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></div></header><aside class="sidebar" data-v-018e9cb6><nav class="nav-links nav" data-v-018e9cb6 data-v-68d46b9e><!--[--><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/" data-v-7e0eb2fd>首页 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item" href="/vform-element/guide/get-start.html" data-v-7e0eb2fd>指南 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item active" href="/vform-element/api/form.html" data-v-7e0eb2fd>配置 <!----></a></div></div><div class="item" data-v-68d46b9e><div class="nav-link" data-v-68d46b9e data-v-7e0eb2fd><a class="item isExternal" href="https://github.com/foolishchow/vform" target="_blank" rel="noopener noreferrer" data-v-7e0eb2fd>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-7e0eb2fd><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-018e9cb6><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/form.html">表单</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/form-item.html">表单元素</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">Element元素</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/vform-element/api/cascader.html">Cascader 级联选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/checkbox-group.html">CheckboxGroup 多选框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/color-picker.html">ColorPicker 颜色选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/date-picker.html">DatePicker 日期选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/date-time-picker.html">DateTimePicker 日期时间选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/input.html">Input 输入框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/autocomplete.html">Autocomplete 自动补全</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/input-number.html">InputNumber 数字输入框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/radio-group.html">RadioGroup 单选框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/rate">Rate 评分</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/select">Select 选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/select-v2">Select V2 虚拟列表选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/slider">Slider 滑块</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/switch">Switch 开关</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/time-picker">TimePicker 时间选择器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/time-select">TimeSelect 时间选择</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/transfer">Transfer 穿梭框</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vform-element/api/upload">Upload 上传</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7b60a085><div class="page-left" data-v-7b60a085></div><div class="container" data-v-7b60a085><!--[--><!--]--><div style="position:relative;" class="content" data-v-7b60a085><div><h1 id="cascader-级联选择器" tabindex="-1">Cascader 级联选择器 <a class="header-anchor" href="#cascader-级联选择器" aria-hidden="true">#</a></h1><p>当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。</p><h2 id="基础使用" tabindex="-1">基础使用 <a class="header-anchor" href="#基础使用" aria-hidden="true">#</a></h2><p>有两种触发子菜单的方式</p><p>只需为 <code>Cascader</code> 的<code>options</code>属性指定选项数组即可渲染出一个级联选择器。<br> 通过 <code>props.expandTrigger</code> 可以定义展开子级菜单的触发方式。</p><p><!----></p><h2 id="有禁用选项" tabindex="-1">有禁用选项 <a class="header-anchor" href="#有禁用选项" aria-hidden="true">#</a></h2><p>通过在数据源中设置 <code>disabled</code> 字段来声明该选项是禁用的</p><p>本例中，<code>options</code>指定的数组中的第一个元素含有<code>disabled: true</code>键值对，因此是禁用的。<br> 在默认情况下，<code>Cascader</code> 会检查数据中每一项的<code>disabled</code>字段是否为<code>true</code>，<br> 如果你的数据中表示禁用含义的字段名不为<code>disabled</code>，可以通过<code>props.disabled</code>属性来指定。<br> 当然，<code>value</code>、<code>label</code>和<code>children</code>这三个字段名也可以通过同样的方式指定。</p><p><!----></p><h2 id="一键清空" tabindex="-1">一键清空 <a class="header-anchor" href="#一键清空" aria-hidden="true">#</a></h2><p>通过<code>clearable</code>设置输入框可清空</p><details class="details custom-block"><summary>代码示例</summary><div class="language-tsx line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useFormBuilder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vform-element&#39;</span>

<span class="token keyword">const</span> FormBuilder <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useFormBuilder</span><span class="token generic class-name"><span class="token operator">&lt;</span>BaseInfo<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">Cascader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    dataIndex<span class="token operator">:</span> <span class="token string">&#39;hobits&#39;</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">&#39;点击展开&#39;</span><span class="token punctuation">,</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      placeholder<span class="token operator">:</span> <span class="token string">&#39;Please Select&#39;</span><span class="token punctuation">,</span>
      clearable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      options<span class="token operator">:</span> DisabledOptions
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></details><h2 id="仅显示最后一级" tabindex="-1">仅显示最后一级 <a class="header-anchor" href="#仅显示最后一级" aria-hidden="true">#</a></h2><p>可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。<br><code>showAllLevels</code> 定义了是否显示完整的路径</p><ul><li>默认为<code>true</code> 展示所有层级</li><li>设置为<code>false</code>时 只展示最后一级</li></ul><details class="details custom-block"><summary>代码示例</summary><div class="language-tsx line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useFormBuilder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vform-element&#39;</span>

<span class="token keyword">const</span> FormBuilder <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useFormBuilder</span><span class="token generic class-name"><span class="token operator">&lt;</span>BaseInfo<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">Cascader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    dataIndex<span class="token operator">:</span> <span class="token string">&#39;hobits&#39;</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">&#39;点击展开&#39;</span><span class="token punctuation">,</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      placeholder<span class="token operator">:</span> <span class="token string">&#39;Please Select&#39;</span><span class="token punctuation">,</span>
      showAllLevels<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      options<span class="token operator">:</span> DisabledOptions
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></details><h2 id="多选" tabindex="-1">多选 <a class="header-anchor" href="#多选" aria-hidden="true">#</a></h2><p>在<code>Cascader</code>的属性配置中设置<code>multiple: true</code>即可开启多选</p><details class="details custom-block"><summary>代码示例</summary><div class="language-tsx line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useFormBuilder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vform-element&#39;</span>

<span class="token keyword">const</span> FormBuilder <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useFormBuilder</span><span class="token generic class-name"><span class="token operator">&lt;</span>BaseInfo<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">Cascader</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    dataIndex<span class="token operator">:</span> <span class="token string">&#39;hobits&#39;</span><span class="token punctuation">,</span>
    label<span class="token operator">:</span> <span class="token string">&#39;点击展开&#39;</span><span class="token punctuation">,</span>
    props<span class="token operator">:</span> <span class="token punctuation">{</span>
      props<span class="token operator">:</span> <span class="token punctuation">{</span>
        multiple<span class="token operator">:</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div></details><p><!----></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><ul><li><code>collapseTags:true</code> 在多选模式下折叠已选项</li><li><code>collapseTagsTooltip:true</code> 在多选模式下为折叠的已选项提供一个<code>tooltip</code></li></ul></div><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p><code>collapseTags:true</code> 仅在多选模式下生效</p></div><h2 id="选择任意一级选项" tabindex="-1">选择任意一级选项 <a class="header-anchor" href="#选择任意一级选项" aria-hidden="true">#</a></h2><p>在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。 启用该功能后，可让父子节点取消关联，选择任意一级选项。<br> 可通过 <code>props.checkStrictly = true</code> 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。</p><p><!----></p><h2 id="动态加载" tabindex="-1">动态加载 <a class="header-anchor" href="#动态加载" aria-hidden="true">#</a></h2><p>当选中某一级时，动态加载该级下的选项。<br> 通过<code>lazy</code>开启动态加载，并通过<code>lazyload</code>来设置加载数据源的方法。<br><code>lazyload</code>方法有两个参数，第一个参数<code>node</code>为当前点击的节点，第二个<code>resolve</code>为数据加载完成的回调(必须调用)。<br> 为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为<code>leaf</code>，可通过<code>props.leaf</code>修改)。 否则，将以有无子节点来判断其是否为叶子节点。</p><!----><h2 id="可搜索" tabindex="-1">可搜索 <a class="header-anchor" href="#可搜索" aria-hidden="true">#</a></h2><p>可以快捷地搜索选项并选择。</p><p>通过添加<code>filterable</code>来启用过滤。 <code>Cascader</code> 会匹配所有节点的标签和它们的亲节点的标签，是否包含有输入的关键字。 你也可以用<code>filter-method</code>自定义搜索逻辑，接受一个函数，第一个参数是节点<code>node</code>，第二个参数是搜索关键词<code>keyword</code>，通过返回布尔值表示是否命中。</p><!----><h2 id="自定义节点内容" tabindex="-1">自定义节点内容 <a class="header-anchor" href="#自定义节点内容" aria-hidden="true">#</a></h2><p>可以自定义备选项的节点内容</p><p>你可以通过 <code>scoped slot</code> 自定义节点的内容。 使用 <code>scoped slot</code> 会传入两个参数<code>node</code>和<code>data</code>，分别表示当前节点的 <code>Node</code> 对象和当前节点的数据。</p><!----><h2 id="配置选项" tabindex="-1">配置选项 <a class="header-anchor" href="#配置选项" aria-hidden="true">#</a></h2><p><code>Cascader</code> 完全继承了 <code>ElCascader</code>的属性 您可以从下面的链接里找到相关文档</p><ul><li><a href="https://element-plus.org/zh-CN/component/cascader.html" target="_blank" rel="noopener noreferrer">Element ElCascader 级联选择器</a></li><li><a href="https://element-plus.org/zh-CN/component/cascader.html#cascader-%E5%B1%9E%E6%80%A7" target="_blank" rel="noopener noreferrer">Element ElCascader 级联选择器 的属性</a></li><li><a href="https://element-plus.org/zh-CN/component/cascader.html#props" target="_blank" rel="noopener noreferrer">Element ElCascader 级联选择器 的属性 <code>Props</code>选项</a></li></ul><h2 id="typescript声明" tabindex="-1"><code>typescript</code>声明 <a class="header-anchor" href="#typescript声明" aria-hidden="true">#</a></h2><div class="language-typescript line-numbers-mode"><pre><code><span class="token keyword">type</span> <span class="token class-name">VCascaderProps</span> <span class="token operator">=</span> Omit<span class="token operator">&lt;</span>VueProps<span class="token operator">&lt;</span><span class="token keyword">typeof</span> ElCascader<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token string">&#39;props&#39;</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> <span class="token punctuation">{</span>
  props<span class="token operator">?</span><span class="token operator">:</span> Omit<span class="token operator">&lt;</span>CascaderProps<span class="token punctuation">,</span> <span class="token string">&#39;expandTrigger&#39;</span><span class="token operator">&gt;</span> <span class="token operator">&amp;</span> <span class="token punctuation">{</span>
    expandTrigger<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">&#39;click&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;hover&#39;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">VCascaderItem<span class="token operator">&lt;</span>
  <span class="token constant">T</span> <span class="token keyword">extends</span> object<span class="token punctuation">,</span> Key <span class="token keyword">extends</span> DeepKey<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span> <span class="token operator">=</span> DeepKey<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
<span class="token operator">&gt;</span></span> <span class="token keyword">extends</span> <span class="token class-name">VBaseItem<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> Key<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
  <span class="token comment">/**
   * 类型  cascader
   */</span>
  props<span class="token operator">?</span><span class="token operator">:</span> VPropDef<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> VCascaderProps<span class="token operator">&gt;</span><span class="token punctuation">,</span>
  slots<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">/**
     * 自定义展示模板
     */</span>
    <span class="token keyword">default</span><span class="token operator">?</span><span class="token punctuation">(</span>data<span class="token operator">:</span> <span class="token punctuation">{</span> node<span class="token operator">:</span> Node<span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token operator">|</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span>
    <span class="token comment">/**
     * 无匹配选项时的内容
     */</span>
    empty<span class="token operator">?</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token constant">JSX</span><span class="token punctuation">.</span>Element <span class="token operator">|</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">/**
   * 数据转换
   */</span>
  transfer<span class="token operator">?</span><span class="token operator">:</span> VTransfer<span class="token operator">&lt;</span>Into<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token punctuation">,</span> Key<span class="token operator">&gt;</span><span class="token punctuation">,</span> CascaderValue<span class="token operator">&gt;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div></div><footer class="page-footer" data-v-7b60a085 data-v-4b340945><div class="edit" data-v-4b340945><div class="edit-link" data-v-4b340945 data-v-b84fa0d0><!----></div></div><div class="updated" data-v-4b340945><!----></div></footer><div class="next-and-prev-link" data-v-7b60a085 data-v-6851b17c><div class="container" data-v-6851b17c><div class="prev" data-v-6851b17c><a class="link" href="/vform-element/api/form-item" data-v-6851b17c><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-6851b17c><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-6851b17c>表单元素</span></a></div><div class="next" data-v-6851b17c><a class="link" href="/vform-element/api/checkbox-group" data-v-6851b17c><span class="text" data-v-6851b17c>CheckboxGroup 多选框</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-6851b17c><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div><!----></main></div><!----><!--]--><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_autocomplete.md\":\"d38ba630\",\"api_cascader.md\":\"19457b39\",\"api_checkbox-group.md\":\"aa4f1ba9\",\"api_color-picker.md\":\"5b629c8a\",\"api_date-picker.md\":\"88da5445\",\"api_date-time-picker.md\":\"0697ffae\",\"api_form-item.md\":\"976bc258\",\"api_form.md\":\"ea45ab81\",\"api_input-number.md\":\"a1c0ffe4\",\"api_input.md\":\"36121401\",\"api_radio-group.md\":\"4d20f5c2\",\"api_rate.md\":\"ac385ba6\",\"api_select-v2.md\":\"1454d42a\",\"api_select.md\":\"7cc174f5\",\"api_slider.md\":\"c13c55ce\",\"api_switch.md\":\"eda4ad4d\",\"api_time-picker.md\":\"c9d01cac\",\"api_time-select.md\":\"81635e6f\",\"api_transfer.md\":\"73f5a58d\",\"api_upload.md\":\"3f1d8a0e\",\"guide_custom-render.md\":\"5f5a4fde\",\"guide_get-start.md\":\"1c5502f9\",\"guide_how.md\":\"62e7e9ca\",\"guide_why.md\":\"1126621f\",\"index.md\":\"cfdf7747\"}")</script>
    <script type="module" async src="/vform-element/assets/app.361feb9c.js"></script>
    
  </body>
</html>